import React from 'react';
import {connect} from 'dva';
import {Badge, Col, Layout, Row, Statistic, Tabs} from 'antd';
import BaseComponent from "components/Base/BaseComponent";
import Panel from 'components/Base/Panel';
import ReagentSale from "./ReagentSale";
import DataStatistics from "./DataStatistics"
import ChannelTypeStatistics from "./ChannelTypeStatistics"
import './index.less';
import DataValueStatistics from "../../Data/DataValueStatistics/components";
import QChart from "../../Quality/QData/components/QChart";

const {Content, Footer} = Layout;
const {TabPane} = Tabs

@connect(({dashbodard}) => ({dashbodard}))
export default class extends BaseComponent {

  getNamespace() {
    return "dashbodard";
  }

  getTab = (msg, count) => {
    return (
      <Badge count={count}>
          <span>
            {msg}
          </span>
      </Badge>
    );
  }

  getTitle = (title) => {
    return (<span className="title">{title}</span>);
  }


  render() {

    const {onlineEcgSize, onlineBpSize, onlineSpoSize} = this.getModel(this.getNamespace());

    return (
      <Layout className="dashboard">
        <Content>

          <Row gutter={16}>
            <Col span={6}>
              <div className="statistic device">
                <Statistic
                  title={this.getTitle("设备数量 (在线/总数)")}
                  value={95}
                  valueStyle={{color: '#ffffff'}}
                  suffix="/ 100"/>
              </div>
            </Col>
            <Col span={6}>
              <div className="statistic data">
                <Statistic
                  title={this.getTitle("数据总量 (已上传/未上传)")}
                  value={258494}
                  valueStyle={{color: '#ffffff'}}
                  suffix="/ 2000"/>
              </div>
            </Col>
            <Col span={6}>
              <div className="statistic reagent">
                <Statistic
                  title={this.getTitle("试剂销售总量")}
                  value={1525}
                  valueStyle={{color: '#ffffff'}}/>
              </div>
            </Col>
            <Col span={6}>
              <div className="statistic hospital">
                <Statistic
                  title={this.getTitle("医院数量")}
                  value={95}
                  valueStyle={{color: '#ffffff'}}/>
              </div>
            </Col>
          </Row>

          <div style={{height: '20px'}}/>

          {/*<Panel title="检验数据变化趋势" >*/}
          {/*  <DataValueStatistics/>*/}
          {/*</Panel>*/}

          {/*<Panel title="质控图">*/}
          {/*  <QChart/>*/}
          {/*</Panel>*/}

          <Row gutter={16}>
            <Col span={16}>
              <Panel title="每月数据总量统计">
                <DataStatistics/>
              </Panel>
            </Col>

            <Col span={8}>
              <Panel title="不同检测项目数据占比">
                <ChannelTypeStatistics/>
              </Panel>
            </Col>
          </Row>


          <Panel title="试剂销售统计图">
            <ReagentSale/>
          </Panel>

        </Content>
      </Layout>
    );
  }
}
